<template>
  <el-table :data="students" style="width: 100%">
    <el-table-column label="编号" prop="id" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="年龄" prop="age" />
    <el-table-column label="电话" prop="cellphone" />
    <el-table-column label="籍贯" prop="address" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="keyword" size="small" placeholder="搜索学生" @input="searchStudents" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="editStudent(scope.row)">
          修改
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="confirmDeleteStudent(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
  />

  <!-- 新增学生按钮 -->
  <el-button type="primary" @click="showAddDialog" style="margin-bottom: 20px;">
    新增学生
  </el-button>

  <!-- 编辑学生对话框 -->
  <el-dialog v-model="dialogFormVisible" title="编辑学生信息" width="500">
    <el-form :model="student">
      <el-form-item label="姓名">
        <el-input v-model="student.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="student.gender" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="student.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="student.cellphone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input v-model="student.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateStudent">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增学生对话框 -->
  <el-dialog v-model="addDialogVisible" title="新增学生" width="500">
    <el-form :model="newStudent">
      <el-form-item label="姓名">
        <el-input v-model="newStudent.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="newStudent.gender" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="newStudent.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="newStudent.cellphone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input v-model="newStudent.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addStudent">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessageBox } from 'element-plus';

export default {
  name: "StudentView",
  data() {
    return {
      students: [],
      keyword: '',
      total: 0, // 总条数
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页条数
      dialogFormVisible: false, // 编辑对话框是否显示
      addDialogVisible: false, // 新增对话框是否显示
      student: {}, // 当前编辑的学生
      newStudent: { // 新增学生信息
        name: '',
        gender: '',
        age: '',
        cellphone: '',
        address: ''
      }
    }
  },
  methods: {
    loadStudents() {
      this.$axios.get('/student/list', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyword: this.keyword
        }
      })
          .then(result => {
            if (result.data.status === 1) {
              this.students = result.data.data.list;
              this.total = result.data.data.total;
            } else {
              console.error("请求成功，但返回的数据不正确:", result.data.message);
            }
          })
          .catch(error => {
            console.error("请求失败:", error);
          });
    },
    searchStudents() {
      this.pageNum = 1; // 搜索时重置页码
      this.loadStudents();
    },
    editStudent(student) {
      this.dialogFormVisible = true;
      this.student = JSON.parse(JSON.stringify(student)); // 深拷贝学生信息
    },
    updateStudent() {
      this.$axios.put("/student", this.student)
          .then(result => {
            if (result.data.status === 1) {
              this.$message.success("更新成功");
              this.dialogFormVisible = false;
              this.loadStudents();
            } else {
              this.$message.error("更新失败: " + result.data.message);
            }
          })
          .catch(error => {
            console.error("更新失败:", error);
          });
    },
    confirmDeleteStudent(id) {
      ElMessageBox.confirm('确定要删除该学生吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteStudent(id);
      }).catch(() => {
        // 用户点击了取消，不执行任何操作
      });
    },
    deleteStudent(id) {
      this.$axios.delete(`/student/${id}`)
          .then(result => {
            if (result.data.status === 1) {
              this.$message.success("删除成功");
              this.loadStudents();
            } else {
              this.$message.error("删除失败: " + result.data.message);
            }
          })
          .catch(error => {
            console.error("删除失败:", error);
          });
    },
    handlePageChange(pageNum) {
      this.pageNum = pageNum;
      this.loadStudents();
    },
    showAddDialog() {
      this.addDialogVisible = true;
      this.newStudent = { // 重置新增学生信息
        name: '',
        gender: '',
        age: '',
        cellphone: '',
        address: ''
      };
    },
    addStudent() {
      this.$axios.post("/student", this.newStudent)
          .then(result => {
            if (result.data.status === 1) {
              this.$message.success("新增成功");
              this.addDialogVisible = false;
              this.loadStudents();
            } else {
              this.$message.error("新增失败: " + result.data.message);
            }
          })
          .catch(error => {
            console.error("新增失败:", error);
          });
    }
  },
  mounted() {
    this.loadStudents();
  }
}
</script>

<style scoped>
</style>